<template>
  <div class="category">
    <div @click="$router.push('/goodsList?cid='+item.cid)" class="category-item" v-for="item in hotCategories" :key="item.cid">
      <img class="icon" :src="global.MINIO_FILE_DOMAIN + item.icon_url" />
      <text class="text">{{ item.name }}</text>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

defineProps({
  "hotCategories": {
    type: Array,
    default: []
  }
})

// 全局属性
const global = inject('global')

</script>

<style lang="scss">
/* 前台类目 */
.category {
  margin: 10px 0 0;
  padding: 5px 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 164px;

  .category-item {
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      box-shadow: 0 0 4px gray;
    }
    .text {
      font-size: 13px;
      color: #666;
      margin: 5px 0;
    }
  }
}
</style>